<template>
	<view class="">
		<cu-navbar :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">我的测试</block>
		</cu-navbar>
		<scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view
					class="cu-item flex-sub"
					:class="item.type == TabCur ? 'text-mauve cur' : ''"
					v-for="(item, index) in tablist"
					:key="index"
					@tap="tabSelect"
					:data-id="item.type"
				>
					{{ item.title }}
				</view>
			</view>
		</scroll-view>
		<view class="cu-list menu-avatar solids-top">
			<view class="cu-item cur" v-for="(item, index) in list" :key="index" @click="goPages(item)">
				<view class="cu-avatar radius xl" :style="{ backgroundImage: 'url(' + item.image + ')' }"><!-- <view class="cu-tag badge" v-if="index<10"></view> --></view>
				<view class="content">
					<view>
						<view class="text-cut" v-text="item.title"></view>
						<!-- <view class="cu-tag round bg-mauve sm">6人</view> -->
					</view>
					<view class="text-gray text-sm flex"><view class="text-cut" v-text="item.description"></view></view>
					<view class="flex justify-between">
						<text class="text-lg text-shadow text-mauve">￥{{ item.pay_mode==2?item.price:'免费' }}</text>
						<text class="text-gray text-shadow">{{ item.test_num }}人已测</text>
					</view>
				</view>
				<!-- <view class="action">
					<view class="text-grey text-xs">22:20</view>
					<view class="cuIcon-notice_forbid_fill text-gray"></view>
				</view> -->
			</view>
		</view>
		<view class="" v-if="!list.length"><cu-empty></cu-empty></view>
	</view>
</template>

<script>
export default {
	onLoad(e) {
		if (e.index != 0) {
			this.TabCur = 'finish';
		}
		this.get_my_test();
	},
	data() {
		return {
			TabCur: 'unfinish',
			scrollLeft: 0,
			tablist: [
				{
					title: '未完成',
					type: 'unfinish'
				},
				{
					title: '已完成',
					type: 'finish'
				}
			],
			page: 1,
			list: [],
			is_loading: true
		};
	},
	methods: {
		tabSelect(e) {
			this.TabCur = e.currentTarget.dataset.id;
			this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
			this.list = [];
			this.page = 1;
			this.is_loading = true;
			this.get_my_test();
		},
		get_my_test() {
			this.$api
				.my_test({
					page: this.page,
					status: this.TabCur
				})
				.then(res => {
					if (res.code) {
						if (res.data.current_page == res.data.last_page) {
							this.is_loading = false;
						}
						this.list = this.list.concat(res.data.data);
					}
				});
		},
		goPages(item) {
			if (item.status == 'unfinish') {
				this.$common.navigateTo(this.$ph.test + `?test_id=${item.id}`);
			} else {
				this.$common.navigateTo(this.$ph.success + `?test_id=${item.id}`);
			}
		}
	},
	onReachBottom() {
		if (this.is_loading) {
			this.page++;
			this.get_my_test();
		}
	}
};
</script>

<style>
page {
	background-color: #f4f6f8;
}
.cu-list.menu-avatar > .cu-item {
	height: 190upx;
}

.cu-list.menu-avatar > .cu-item .content {
	left: 190upx;
	width: calc(100% - 52px - 66px);
}
</style>
